<!--  -->
<template>
  <a-modal
    width="80%"
    :title="isHidden ? $t('all.autotext336') : $t('all.autotext797')"
    :visible="innerVisible"
    :footer="null"
    @cancel="handleCancel(0)"
  >
    <!-- 添加研究团队 -->
    <s-table
      :columns="columns"
      bordered
      :data="loadData"
      :row-key="record => record.id"
      ref="memberTableRef"
    >
      <template slot="title">
        <div style="display: flex;justify-content:space-between;}">
          <span class="title">{{ $t('all.autotext1143') }}</span>
          <a-button
            type="primary"
            icon="plus"
            v-if="!isHidden "
            @click="clickAddGroup()"
          >
            {{ $t('all.autotext176') }}
          </a-button>
        </div>
      </template>
      <template slot="phone" slot-scope="text, record">
        {{ record.phone | formatPhone() }}
      </template>
      <template slot="email" slot-scope="text, record">
        {{ record.email | formatEmail() }}
      </template>
      <template slot="authStatus" slot-scope="text, record">
        {{ record.authStatus | enumValueByKey($const.CENTER_MEMBER_STATUS) }}
      </template>
      <template slot="operate" slot-scope="text, record">
        <a @click="clickView(record)" style="margin-right: 10px">{{ $t('all.autotext568') }}</a>
        <a @click="clickView(record)" style="margin-right: 10px">{{ $t('all.autotext919') }}</a>
        <a-popconfirm :title="$t('all.autotext1504')" @confirm="clickCancel(record)">
          <!-- 4 是待处理 为4时可以取消 其余状态只能删除-->
          <a v-if="record.authStatus == 4" style="margin-right: 10px">{{ $t('all.autotext975') }}</a>
        </a-popconfirm>
        <a-popconfirm :title="$t('all.autotext788')" @confirm="clickReinvite(record)">
          <a v-if="(record.authStatus === 2 || record.authStatus === 4) ">{{ $t('all.autotext362') }}</a>
        </a-popconfirm>
      </template>
    </s-table>
    <!-- 查看团队成员信息弹框 -->
    <ViewCenterMemberModal
      ref="viewCenterMemberRef"
      :viewCenterModalVisible="viewCenterModalVisible"
      :viewCenterMemberDetail="viewCenterMemberDetail"
      :hospitalNameProp="mainInfo.orgName"
      @closeViewCenterModal="closeViewCenterModal"
    />

    <!-- 团队成员新增弹框 -->
    <AddMemberModal
      ref="addMemberRef"
      :researchId="centerId"
      :modalVisible="modalVisible"
      :hospitalNameProp="mainInfo.orgName"
      :departmentListProp="departmentListProp"
      @closeModal="closeModal"
    />
  </a-modal>
</template>

<script>
import { getCenterDetail, deleteCenterMember, reinviteCenterMember } from '@/api/overview/member'
import ViewCenterMemberModal from './ViewCenterMemberModal'
import AddMemberModal from './AddMemberModal'
// import { buildPaginationObj } from '@/components/Table'
import modalMixin from '@/utils/modal.mixin'

export default {
  props: ['centerId', 'isHidden'],
  mixins: [modalMixin],
  components: {
    ViewCenterMemberModal,
    AddMemberModal
  },
  data () {
    const columnsMore = [
      {
        title: this.$t('all.autotext1142'),
        key: 'researchNo',
        dataIndex: 'researchNo'
      },
      {
        title: this.$t('all.autotext977'),
        key: 'name',
        dataIndex: 'name'
      },
      {
        title: this.$t('all.autotext898'),
        key: 'roleName',
        dataIndex: 'roleName'
      },
      {
        title: this.$t('all.autotext710'),
        key: 'phone',
        dataIndex: 'phone',
        scopedSlots: { customRender: 'phone' }
      },
      {
        title: this.$t('all.autotext1296'),
        key: 'email',
        dataIndex: 'email',
        scopedSlots: { customRender: 'email' }
      },
      {
        title: this.$t('all.autotext667'),
        key: 'authStatus',
        dataIndex: 'authStatus',
        scopedSlots: { customRender: 'authStatus' }
      },
      {
        title: this.$t('all.autotext187'),
        key: 'operate',
        scopedSlots: { customRender: 'operate' }
      }
    ]
    return {
      proId: '',
      mainInfo: {},
      columns: columnsMore,
      modalVisible: false,
      viewCenterModalVisible: false,
      viewCenterMemberDetail: {},
      hospitalNameProp: null,
      departmentListProp: [],
      loadData: parameter => {
        return getCenterDetail({ resId: this.centerId }).then(res => {
          this.mainInfo = res
          return res.detailsList
        })
      }
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.proId = parseInt(pd)
    }
  },
  methods: {
    modalUpdated () {
      console.log(this.isHidden)
      this.$nextTick(() => {
        this.$refs.memberTableRef.refresh(true)
      })
    },
    // 对话框关闭
    handleCancel (val) {
      this.$emit('closeResearchGroup', val)
    },
    // 点击查看详情
    clickView (record) {
      this.viewCenterModalVisible = true
      this.viewCenterMemberDetail = record
      this.$refs.viewCenterMemberRef.getCenterDetail(record.researchId)
    },
    // 关闭查看成员信息对话框
    closeViewCenterModal (val) {
      this.viewCenterModalVisible = false
      if (val) {
        this.$refs.memberTableRef.refresh(true)
      }
    },
    // 点击添加成员显示添加对话框
    clickAddGroup () {
      this.modalVisible = true
      if (this.mainInfo.orgDeptId) {
        this.departmentListProp = this.filterDepartment()
      }
    },
    // 提取科室 新增研究中心成员时将所选的科室传给子组件
    filterDepartment () {
      const newArr = []
      const idArr = this.mainInfo.orgDeptId.split(',')
      const nameArr = this.mainInfo.orgDeptName.split(',')
      for (let i = 0; i < idArr.length; i++) {
        const obj = {}
        obj.id = idArr[i]
        obj.name = nameArr[i]
        newArr.push(obj)
      }
      return newArr
    },
    // 对话框关闭 根据val判断是取消还是发送了邀请
    closeModal (val) {
      if (val) {
        this.$refs.memberTableRef.refresh(true)
      }
      this.modalVisible = false
    },
    // 点击重新邀请
    clickReinvite (record) {
      reinviteCenterMember({ proId: this.proId, researchNo: record.researchNo, id: record.id, status: record.authStatus })
        .then(res => {
          this.$message.success(this.$t('all.autotext1205'))
          this.$refs.memberTableRef.refresh(true)
        })
        .catch(() => {})
    },
    // 点击取消
    clickCancel (record) {
      deleteCenterMember({ id: record.id })
        .then(res => {
          console.log(res)
          this.$refs.memberTableRef.refresh(true)
        })
        .catch(() => {})
    },
    // 点击移出
    clickRemove (record) {
      deleteCenterMember({ id: record.id })
        .then(res => {
          this.$refs.memberTableRef.refresh(true)
        })
        .catch(() => {})
    }
  }
}
</script>
<style scoped lang="less">
.title {
  line-height: 32px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: bold;
  font-size: 16px;
}
</style>
